<template>
    <div class="view" :style="{'background-image':'url('+backgroundUrl+')'}">
        <div class="app-logo">
            <img src="@/assets/images/logo.png">
        </div>
        <div class="app-version">
            Version 2.5.13
        </div>
        <div class="app-open" @click="download">
            下载并打开App
        </div>
        <div class="app-back" @click="back">返回，暂不下载</div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import NavBar from "@/components/aui/NavBar.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import ChatMessageEntity from "@/entity/ChatMessageEntity";

    import CommonUnit from "@/unit/CommonUnit";
    import {InterfacePosition} from "@/interface/InterfacePosition";
    import {clearPosition} from "@/store/dispatches";
    import {InterfaceSocket} from "@/interface/InterfaceSocket";


    @Component({
        components: {
            NavBar
        },
    })
    export default class AppDownload extends Scene {
        private backgroundUrl: string = require("@/assets/images/app-download-bg.png");

        private back(): void {
            this.navigateBack();
        }

        private download(): void {
            const start: any = new Date();
            const t = 500;
            const ifr: any = document.createElement("iframe");
            ifr.src = "loveheart://xxyhl.cn/app/";
            document.body.appendChild(ifr);
            ifr.onload = function() {
                ifr.style.display = "none";
            };
            setTimeout(function() {
                document.body.removeChild(ifr);
                let end: any = new Date(); //记录结束时间
                console.log(end - start);
                if (end - start - t <= 30) { //两者之差小于30ms时跳转到下载页
                    window.location.href = "https://www.pgyer.com/706518";
                }
            }, t);
        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        padding calc(var(--safe-area-inset-top) + 10px) 10px 10px 10px;
        background-position center bottom;
        background-size cover;

        .app-logo
            width 90px;
            height 90px;
            border-radius 12px;
            margin 60px auto 0;
            overflow hidden;

            img
                width 90px;
                height 90px;

        .app-version
            font-size 17px;
            color #333;
            margin-top 20px;
            text-align center;
            line-height 30px;

        .app-open
            height 43px;
            width 250px;
            font-size 14px;
            line-height 43px;
            text-align center;
            border 1px solid $theme-common-color;
            margin 50px auto 0;
            border-radius 7px;
            background rgba(255, 255, 255, .3)
            color $theme-common-color

        .app-back
            font-size 13px;
            line-height 30px;
            margin 20px auto 10px
            width 200px;
            text-align center;
            color #666;
            height 30px;


    /*background-image: url('@/asset')*/

</style>
